<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <!-- 小胡子语法  插值符 {{}} -->
        <!-- 插值符中除了能是data中的数据，还可以是一些js表达式 -->
        <!-- js表达式: 返回的是一个值的 -->
        <div>{{msg}}</div>
        <div>{{arr}}</div>
        <div>{{1+1}}</div>
        <div>{{Date.now()}}</div>
        <!-- 将数组转成字符串，并且填充指定字符 -->
        <div>{{arr.join('|')}}</div>
        <div>{{arr.filter(e => e%2==0)}}</div>
        <!-- map:让数组中的元素都执行相同的操作 -->
        <div>{{arr.map(e=> e*e)}}</div>
        <div>{{num>10 ? true : false}}</div>

    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        //使用原生js(Dom)实现hello world
/*         var div = document.getElementById('app');
        div.innerText = 'Hello World'; */


        //使用vue    生成Vue的实例   ajax:{options}
       const app = Vue.createApp({
            data : function () {
                return {
                    msg : "hello world!",
                    arr: [1,2,3,4,5,6,7,8],
                    num: 8
                }
            }
       });
    //    将app实例挂载到div中
       app.mount('#div');
    </script>

</body>
</html>